/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Table, Button, Row, Col, Card } from 'antd';
import { getPros } from '../../axios';
import BreadcrumbCustom from '../BreadcrumbCustom';
import ListDetail from './ListDetails';
import Modify from './Modify'

class AsynchronousTable extends React.Component {
    state = {
        selectedRowKeys: [],  // Check here to configure the default column
        loading: false,
        data: [],
        showDetails: false,
        record: []            // 选择当前行的数据
    };

    componentDidMount() {
        this.start();
    }
    start = () => {
        this.setState({ loading: true });
        const { columns } = require('./columns')
        this.setState({
            data: columns,
            loading: false
        })
    };
    onSelectChange = (selectedRowKeys) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    render() {
        const { loading, selectedRowKeys, showDetails } = this.state;
        const onRow = (record, index) => {
            return {
                onClick: () => {
                    this.setState({
                        record
                    })
                    this.listDetail.showModal()
                }
            }
        }
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
        }, {
            title: '卡号',
            dataIndex: 'code',
        }, {
            title: '手机号码',
            dataIndex: 'phone',
        }, {
            title: '积分',
            dataIndex: 'bonus',
        },{
            title: '等级',
            dataIndex: 'level'
        }, {
            title: '注册时间',
            dataIndex: 'begin_date'
        },{
            title: '操作',
            render: (text, record, index) => {
                return (
                    <a style={{ padding: 20 }} onClick={(e) => { e.stopPropagation(); this.modify.showModal() }} >修改</a>
                )
            }
        }];
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div className="gutter-example">
                <BreadcrumbCustom first="会员管理" second="会员列表" />
                <Row gutter={16}>
                    <Col className="gutter-row" md={24}>
                        <div className="gutter-box">
                            <Card bordered={false}>
                                <div style={{ marginBottom: 16 }}>
                                    <Button type="primary" onClick={this.start}
                                        disabled={loading} loading={loading}
                                    >Reload</Button>
                                </div>
                                <Table
                                    columns={columns}
                                    dataSource={this.state.data}
                                    onRow={onRow}
                                    rowKey="code"
                                    bordered
                                />
                                <ListDetail data={this.state.record} ref={e => this.listDetail = e} />
                                <Modify data={this.state.record} ref={e => this.modify = e} />
                            </Card>
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default AsynchronousTable;